<template>
	<view class="container">
		<!-- 头部统计信息 -->
		<view class="header">
			<view class="stat-card blue">
				<text class="label">当前现金余额（元）</text>
				<text class="value">{{cruntAmont}}</text>
			</view>

			<view class="stat-group">
				<view class="stat-item">
					<text>累计收入（元）</text>
					<text class="num">{{accrued}}</text>
				</view>
				<view class="stat-item">
					<text>累计提现（元）</text>
					<text class="num">{{PayoutsAmont}}</text>
				</view>
			</view>
		</view>

		<!-- 提现按钮 -->
		<view class="withdraw-header">
			<text class="section-title">收支明细</text>
			<button class="withdraw-btn" @click="reqPayouts">提现</button>
			<!-- 自由选择时间 -->
			<picker mode="date" :value="data" @change="switchDate">
				<view style="background-color: #07C160;">{{ data }}</view>
			</picker>
		</view>

		<!-- 收支列表 -->
		<scroll-view class="list-container" scroll-y>
			<view v-for="(item, index) in transactions" :key="index" class="list-item">
				<view class="item-left">
					<text class="title">{{ item.title }}</text>
					<text class="time">{{ item.createTime }}</text>
				</view>
				<view class="item-right">
					<text :class="['amount', item.changeType === 'income' ? 'green' : 'red']">
						{{ item.changeType === 'income' ? '+' : '-' }}{{ item.balanceChange }}
					</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
  import {getstroeMerchants} from '@/api/mcslf/merchants'
  import {getFRlist} from '@/api/mcslf/frcontroller'
	const cruntAmont = ref(1500.00)
	const accrued = ref(1300.00)
	const PayoutsAmont = ref(200.00)
	const data = ref(getToday())
  const getData = async () => {
    // 时间默认今天 选择事件后发起请求
    let res = await getstroeMerchants();
    cruntAmont.value = res.data.shopBalance;
    accrued.value = res.data.cumulativeIncome;
    PayoutsAmont.value = res.data.cumulativeWithdrawal;
    // 更新收支明细
    queryparms.value.date = data.value;
    getlist();
    console.log("发起请求1111" + data.value);
  }
  const transactions = ref([]);
  const queryparms = ref({
    current:1,
    size:7,
    date:null
  })
  const getlist = async () =>{
  let res = await getFRlist(queryparms.value);
    console.log("=========================")
    console.log(transactions.value)
    console.log(res.data.records)
    transactions.value = [...transactions.value,...res.data.records]
    console.log(transactions.value)
  }
	function pad(n) {
		return n < 10 ? '0' + n : n
	}

	function getToday() {
		const date = new Date()
		return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}`
	}
	//  选择时间回调
	const switchDate = (e) => {
		data.value = e.detail.value;
		getData();
	}


	onMounted(() => {
		getData();
	})
	// 点击提现按钮回调
	const reqPayouts = () => {
		uni.navigateTo({
			url: '/pages/reqpayouts/reqpayouts'
		});
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		display: flex;
		margin-bottom: 20rpx;

		.stat-card {
			flex: 1;
			padding: 30rpx;
			border-radius: 16rpx;
			background-color: #2979FF;
			color: white;

			.value {
				font-size: 40rpx;
				margin-top: 15rpx;
				display: block;
			}
		}

		.stat-group {
			flex: 1;
			margin-left: 20rpx;

			.stat-item {
				background: white;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 10rpx;

				.num {
					font-size: 34rpx;
					color: #333;
					display: block;
					margin-top: 10rpx;
				}
			}
		}
	}

	.withdraw-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;

		.section-title {
			font-size: 34rpx;
			color: #333;
			font-weight: bold;
		}

		.withdraw-btn {
			background: #2979FF;
			color: white;
			padding: 0 40rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
		}
	}

	.list-container {
		height: calc(100vh - 400rpx);

		.list-item {
			background: white;
			padding: 30rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			display: flex;
			justify-content: space-between;

			.item-left {
				.title {
					font-size: 30rpx;
					color: #333;
				}

				.time {
					font-size: 24rpx;
					color: #999;
					display: block;
					margin-top: 15rpx;
				}
			}

			.amount {
				font-size: 32rpx;
				font-weight: 500;

				&.green {
					color: #4CAF50;
				}

				&.red {
					color: #F44336;
				}
			}
		}
	}
</style>